import React, { useEffect, useRef,useState } from 'react';
import { Line } from '@ant-design/charts';

import { Column } from '@ant-design/plots';
import { Scatter } from '@ant-design/plots';
import { Pie } from '@ant-design/charts';

// import React, { useEffect, useRef, useState } from 'react'
// import * as echarts from 'echarts';
// import { Button } from 'antd'
// import { Line,Pie } from '@ant-design/charts';
// import axios from 'axios'


const PlotMaps = {};

export default function Echarts() 
{

    // 渐变色散点图
    const config = {
        paddingLeft: 60,
        data: {
        type: 'fetch',
        value: 'https://render.alipay.com/p/yuyan/180020010001215413/antd-charts/scatter-point-sequential.json',
    },
        xField: (d) => new Date(d.date),
        yField: 'value',
        colorField: 'value',
        shapeField: 'point',
        style: {
            stroke: '#000',
            strokeOpacity: 0.2,
        },
        scale: {
            color: {
                palette: 'rdBu',
                offset: (t) => 1 - t,
            },
        },
        tooltip: [{ channel: 'x', name: 'year', valueFormatter: (d) => d.getFullYear() }, { channel: 'y' }],
        annotations: [{ type: 'lineY', data: [0], style: { stroke: '#000', strokeOpacity: 0.2 } }],
    };


    // 带缩略轴柱状图
    const chartRef = useRef();
        useEffect(() => {
            console.log({ chartRef });
            if (chartRef.current) {
            }
        }, []);
    const config1 = {
        data: {
            type: 'fetch',
            value: 'https://gw.alipayobjects.com/os/bmw-prod/be63e0a2-d2be-4c45-97fd-c00f752a66d4.json',
        },
        xField: '城市',
        yField: '销售额',
        slider: {
            x: {
                values: [0.1, 0.2],
            },
        },
    };

  
    return (
         <div style={{ width: '100%', height: 500 }}>
            <div style={{ height: 200, width: '100%', display: 'flex' }}>
                <div style={{ width: '50%' }}><Scatter {...config} /></div>
                <div style={{ width: '50%' }}><Column {...config1} ref={chartRef} /></div>
            </div>
        </div>
    )
}
// {
//   useEffect(() => {
//     asyncFetch();
//   }, [])
//   const mainRef = useRef()
//   const [data, setData] = useState({});
//   const asyncFetch = () => {
//     fetch('https://gw.alipayobjects.com/os/antfincdn/fKTgtjKdaN/association-pie.json')
//       .then((response) => response.json())
//       .then((json) => setData(json))
//       .catch((error) => {
//         console.log('fetch data failed', error);
//       });
//   };

//   if (!Object.keys(data).length) {
//     return null;
//   }

//   const showTooltip = (evt, pie) => {
//     Object.keys(PlotMaps).forEach((plot) => {
//       if (plot !== pie) {
//         PlotMaps[plot].chart.emit('tooltip:show', {
//           data: { data: { area: evt.data.data.area } },
//         });
//         PlotMaps[plot].chart.emit('element:highlight', {
//           data: { data: { area: evt.data.data.area } },
//         });
//       }
//     });
//   };

//   const hideTooltip = (evt, pie) => {
//     Object.keys(PlotMaps).forEach((plot) => {
//       if (plot !== pie) {
//         PlotMaps[plot].chart.emit('tooltip:hide', {
//           data: { data: { area: evt.data.data.area } },
//         });
//         PlotMaps[plot].chart.emit('element:unhighlight', {
//           data: { data: { area: evt.data.data.area } },
//         });
//       }
//     });
//   };

//   const LeftConfig = {
//     angleField: 'bill',
//     colorField: 'area',
//     data: data.pie1,
//     label: {
//       text: 'bill',
//     },
//     legend: false,
//     tooltip: {
//       title: 'area',
//     },
//     interaction: {
//       elementHighlight: true,
//     },
//     state: {
//       inactive: { opacity: 0.5 },
//     },
//   };
//   const RightConfig = {
//     angleField: 'value',
//     colorField: 'area',
//     data: data.pie2,
//     label: {
//       text: 'value',
//     },
//     legend: false,
//     tooltip: {
//       title: 'area',
//     },
//     interaction: {
//       elementHighlight: true,
//     },
//     state: {
//       inactive: { opacity: 0.5 },
//     }
//   }



//   return (

//     <div>

//       <div ref={mainRef} style={{ width: 600, height: 400 }}>
//         <div style={{ display: 'flex', justifyContent: 'space-around' }}>
//           <Pie
//             style={{ width: '50%' }}
//             {...LeftConfig}
//             onReady={(plot) => {
//               PlotMaps.leftPie = plot;
//               plot.on('interval:pointerover', (evt) => {
//                 showTooltip(evt, 'leftPie');
//               });
//               plot.on('interval:pointerout', (evt) => {
//                 hideTooltip(evt, 'leftPie');
//               });
//             }}
//           />
//           <Pie
//             style={{ width: '50%' }}
//             {...RightConfig}
//             onReady={(plot) => {
//               PlotMaps.rightPie = plot;
//               plot.on('interval:pointerover', (evt) => {
//                 showTooltip(evt, 'rightPie');
//               });
//               plot.on('interval:pointerout', (evt) => {
//                 hideTooltip(evt, 'rightPie');
//               });
//             }}
//           />
//         </div>
//       </div>
//     </div>
//   )
// }
